<!-- 服务商详情 -->
<template>
  <div class="details">
    <header-nav></header-nav>
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>服务商查询</span>
    </div>
    <div class="detailsBanner">
      <el-carousel :interval="3000" arrow="never" height="350px" trigger="click">
        <el-carousel-item v-for="(item,index) in seriverLDetail.carouselMap" :key="index">
          <img mode="widthFix" :src="imgBaseUrl + item" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="detailsMain">
      <div class="companyInformation">
        <div>
          <div class="companyIcon">
            <img
              v-if="seriverLDetail.companyLogo.length > 0"
              :src="imgBaseUrl + seriverLDetail.companyLogo"
            />
          </div>
          <div class="companyIntroduction">
            <p>{{seriverLDetail.companyName.length == 0 ? '' : `公司名称：${seriverLDetail.companyName}`}}</p>
            <p>{{seriverLDetail.slogan}}</p>
          </div>
        </div>
      </div>
      <div class="detailIntruduction">
        <div class="detailIntruductionTitle" v-if="seriverLDetail.synopsis.length > 0">公司简介</div>
        <div class="detailLine" v-if="seriverLDetail.synopsis.length > 0"></div>
        <div class="companyMain">{{seriverLDetail.synopsis}}</div>
        <div class="detailIntruductionTitle" v-if="seriverLDetail.coreProducts.length > 0">核心产品</div>
        <div class="detailLine" v-if="seriverLDetail.coreProducts.length > 0"></div>
        <div class="companyProduct">
          <el-carousel :interval="5000" type="card" height="300px" indicator-position="none">
            <el-carousel-item v-for="(item,index) in seriverLDetail.coreProducts" :key="index">
              <img mode="widthFix" :src="imgBaseUrl + item.image" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <p class="companyProductName" v-if="seriverLDetail.synopsis.length > 0"></p>
      </div>
    </div>
    <footerNav />
    <navigation />
  </div>
</template>

<script>
import { getByIdCompanyBusinessCardInfo, imgBaseUrl } from "../../api/api.js";
export default {
  data() {
    return {
      seriverLDetail: {},
      imgBaseUrl: imgBaseUrl,
      datailsId: ""
    };
  },
  head() {
    return {
      title: `${this.seriverLDetail.companyName}-比目镜`,
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: `${this.seriverLDetail.companyName}`
        },
        {
          hid: "description",
          name: "description",
          content: `${this.seriverLDetail.companyName}`
        }
      ]
    };
  },
  created() {
    // let { id } = this.$route.params; // 获取id参数
    // this.datailsId = id;
    // this.getSeriverList();
  },
  async asyncData({ store, route }) {
    let id = route.params.id;
    let data = await getByIdCompanyBusinessCardInfo(id);
    // console.log(555555, data);
    return {
      seriverLDetail: data.result
    };
  },
  methods: {
    getSeriverList() {
      getByIdCompanyBusinessCardInfo(this.datailsId).then(res => {
        console.log(res);
        this.seriverLDetail = res.result;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.mincard {
  span {
    font-size: 14px;
    cursor: pointer;
    margin: 0 10px;
  }
}
.detailsBanner {
  height: 350px;
}
.detailsBanner img {
  // width: 68%;
  margin: 0 auto;
  height: 350px;
  // height: 100%;
}
.companyInformation {
  // height: 80px;
  padding: 20px 0;
  box-sizing: border-box;
  // background: #f4f4f4;
  display: flex;
  align-items: center;
}
.companyInformation > div {
  margin: 0 auto;
  width: 1200px;
  display: flex;
}
.companyIcon {
  width: 52px;
  height: 52px;
  margin-right: 20px;
}
.companyIcon img {
  width: 100%;
  height: 100%;
}
.companyIntroduction {
  flex: 1;
}
.companyIntroduction p:first-child {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 8px;
}
.companyIntroduction p:last-child {
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
}
.detailIntruduction {
  margin: 0 auto;
  width: 1200px;
  padding: 30px 0;
}
.detailIntruductionTitle {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
}
.detailLine {
  width: 24px;
  height: 2px;
  background: #44a2ff;
  margin-top: 8px;
}
.companyMain {
  font-size: 14px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
  margin: 18px 0 43px 0;
}
.companyProduct {
  height: 300px;
}
.companyProduct img {
  margin: 0 auto;
  height: 300px;
}
.companyProductName {
  margin-top: 8px;
  text-align: center;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
  color: #333333;
}
.detailsBanner /deep/ .el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  margin: 0;
}
.detailsBanner /deep/ .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.detailsBanner /deep/ .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.detailsBanner /deep/ .el-carousel__indicators button {
  width: 10px;
  height: 10px;
  opacity: 0.2;
  background: #ffffff;
  border-radius: 50%;
}
.detailsBanner /deep/ .el-carousel__indicators .is-active button {
  background: #ffffff;
  opacity: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
</style>
